<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span:hover{
            color: #fff;
            background-color: red;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>首页</span>
        <span>新闻</span>
        <span>图片</span>
        <span>热点</span>
    </div>

    <div id="tip">hello world</div>

    <script>
        //根据id属性获取元素对象，并给对象添加类别样式 多个类别用空格隔开
        document.getElementById("tip").className="red";
        var spans=document.getElementsByTagName("span");
        spans[0].setAttribute("title","这是一个首页");
        spans[1].setAttribute("title",spans[0].getAttribute("title"));
        spans[2].style.backgroundColor = "blue";
    </script>
</body>
</html>